<form class="layui-form layui-form-pamel" name="form1" id="form1" method="post">
    <div class="searchbox demoTable" id="searchbox">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">预警值：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" maxlength="50" name="yujingvalue" id="yujingvalue"
                           placeholder="请输入预警值"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">地面钻孔参与的类型：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" maxlength="50" name="groundtype" id="groundtype"
                           placeholder="请输入地面钻孔参与的类型 1 埋深  2水温  3 标高"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">预警级别：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" maxlength="50" name="yujinglevel" id="yujinglevel"
                           placeholder="请输入预警级别"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否使用预警功能：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" maxlength="50" name="yujinguse" id="yujinguse"
                           placeholder="请输入是否使用预警功能"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">区域名：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" maxlength="50" name="name" id="name" placeholder="请输入区域名"/>
                </div>
            </div>
            <input type="button" value="查询" onclick="$.table.search()" class="layui-btn layui-btn-red"/>
        </div>
    </div>
</form>

<div style="overflow:auto;width: 100%;padding-bottom: 20px;">
    <table id="simple-table" class="layui-table" lay-filter="simple-table">
    </table>
    <script type="text/html" id="barTable">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detailsFlag" title="详情">详情</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="editFlag" title="编辑">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delFlag" title="删除">删除</a>
    </script>

    <script type="text/html" id="toolbarTable">
        <div class="layui-inline" title="添加" lay-event="addFlag"><i class="layui-icon layui-icon-add-circle"></i></div>
        <div class="layui-inline" title="导出" lay-event="exportExcel"><i class="layui-icon layui-icon-export"></i></div>
    </script>
</div>

<script type="text/javascript">

    var prefix = basePath + "device/area";

    var options = {
        id: 'simple-table',
        url: prefix + '/uArealistPage',
        javaField: 'id',    //主键
        addUrl: prefix + '/addUArea',   //添加
        deleteUrl: prefix + '/deleteUArea',    //删除
        editUrl: prefix + '/toEditUArea?id=',   //编辑
        exportUrl: prefix + '/exportUArea',    //导出
        importTemplate: prefix + '/impTempUArea',   //下载导入模板
        importTemplateUrl: prefix + '/impTempUAreaUrl',    //导入
        addFull: false, //弹出框最大化
        editFull: false, //弹出框最大化
        width: 500,  //开启头部工具栏右侧
        height: 450,  //开启头部工具栏右侧
        toolbar: '#toolbarTable',  //开启工具栏
        modalName: '区域管理',
        cols: [[
            {type: 'numbers', title: '序号', width: 50}
            , {field: 'id', title: 'ID'}
            , {field: 'yujingvalue', title: '预警值'}
            , {field: 'groundtype', title: '地面钻孔参与的类型',templet:function (d) {
                    if(d.groundtype == '1'){
                        return '埋深';
                    }else if(d.groundtype == '2'){
                        return '水温';
                    }else if(d.groundtype == '3'){
                        return '标高';
                    }else{
                        return '未知';
                    }
                }}
            , {field: 'yujinglevel', title: '预警级别'}
            , {field: 'yujinguse', title: '是否使用预警功能',templet:function (d) {
                    if(d.yujinguse == '0'){
                        return '是';
                    }else if(d.yujinguse == '1'){
                        return '否';
                    }else{
                        return '未知';
                    }
                }}
            , {field: 'name', title: '区域名'}
            , {title: '操作', width: 178, align: 'center', toolbar: '#barTable'}
        ]],
        page: true
    };

    var init = $.table.init(options);

</script>
